const saveUrl = 'https://qca4go.fn.thelarkcloud.com/saveInfo';
const getUrl = 'https://qca4go.fn.thelarkcloud.com/getInfo';
const loadingImgUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.quweiwu.com%2Fnews%2F20150526102555652.jpg&refer=http%3A%2F%2Ffile.quweiwu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633424819&t=675ddfa4c52a36bc1e43c92f07b5196d';

// 将配置信息更新到服务器
const pushConfig = function(url,data) {
    fetch(url,{
        method:'POST',
        body:JSON.stringify(data),
        headers: new Headers({
            'Content-Type':'application/json'
        })
    }).then( res => {
        return res.json(); // 将 body 内的信息转换为 json 格式
    }).then( res => console.log('success:',res));
}

// 根据 url 获取资源；
const getInfo = async function(url) {
    
    let info = null;
    await fetch(url).then( res => {

        return res.json();
    }).then( res => {
        info = res.info;

    }).catch( err => {
        console.log('err:',err);
    });
    return info;
    
}

let awards = [
    {
        id:0,
        title:'66 矿石',
        imageUrl:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.2,
        quantity:10000
        
    },
    {
        id:1,
        title:'随机限量徽章',
        imageUrl:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71c68de6368548bd9bd6c8888542f911~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.2,
        quantity:100
    },
    {
        id:2,
        title:'掘金新款T恤',
        imageUrl:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bf91038a6384fc3927dee294a38006b~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.1,
        quantity:100
    },
    {
        id:3,
        title:'乐高模型',
        imageUrl:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aabe49b0d5c741fa8d92ff94cd17cb90~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.1,
        quantity:10
    },
    {
        id:4,
        title:'Switch',
        imageUrl:'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4decbd721b2b48098a1ecf879cfca677~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.1,
        quantity:1        
    },
    {
        id:5,
        title:'Yoyo抱枕',
        imageUrl:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33f4d465a6a9462f9b1b19b3104c8f91~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.1,
        quantity:100
    },
    {
        id:6,
        title:'掘金马克杯',
        imageUrl:'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab31c183950541d4a0731c0b8765b173~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.1,
        quantity:200
    },
    {
        id:7,
        title:'BUG',
        imageUrl:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp',
        probability:0.1,
        quantity:10000
    },
];

let mnet = {id:1,mineralNumEachTime:200};

const config = {
    awards,
    mnet
}



// 将配置保存到数据库
const toSave = () => {
    pushConfig(saveUrl,config);
    
}



function Button(props) {
    const { sclass,fun,title } = props;
    return (
        <div className={sclass} onClick={fun}>{title}</div>
    )
}


function Award(props) {
    // const [data,setdata] = useState(props.award);
    const { id,title,imageUrl,probability,quantity } = props.award;
    const { changeAward } = props;
    return (
        <div class="award">

            <div class="award-image">
                <img src={imageUrl} />
                {/* <img url="loadingImgUrl" origin_url={imageUrl} /> */}
            </div>
            <div class="award-id">{id}</div>
            <div class="award-title">{title}</div>
            <div class="award-probability">{probability}</div>
            <div class="award-quantity">{quantity}</div>
            <Button sclass="award-changeButton" fun={changeAward} title="更改"/>
        </div>
    )

}


function Page(props) {

    let isChange = false;
    let page = null;
    let awards = props.awards;
    // 更改奖品
    const changeAward = function() {
        console.log('changeaward',isChange);
        isChange = true;
    }

    if(!isChange){
        page = (
            <section class="page">
                <div class="page-hd">
                    <Button sclass="hd-button" fun={toSave} title="保存到数据库"/>
                    { awards.map( item => <Award award={item} changeAward={changeAward}/>)}
                    
                </div>
                <div class="page-bd"></div>
            </section>
        )

    }else{
        page = (
            <div > 在这里修改 </div>
        )
    }

    return (
        <div class="container">
            <nav class="nav">
                <div class="nav-item" id="nav-item1">主页面</div>
                <div class="nav-item" id="nav-item2">修改页面</div>
            </nav>
            { page }


        </div>

    )
}


(async function(){


    await getInfo(getUrl).then( res => {
        if(res){
            console.log('更新数据');
            awards = res.awards;
        }
        
    })

    ReactDOM.render(
    
        <Page awards={awards}/>,
        document.getElementById('root')
    )
})()


